﻿<Page
    x:Class="Cookbook.Views.RecipesView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Cookbook.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:vm="using:Cookbook.ViewModels"
    mc:Ignorable="d"
    d:DataContext="{d:DesignInstance Type=vm:RecipesViewModel}">

  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <SemanticZoom>
      <SemanticZoom.ZoomedInView>
        <Hub Name="hubControl">
          <HubSection MinWidth="600" Header="Rezept des Tages">
            <HubSection.Background>
              <ImageBrush ImageSource="{Binding RecipeOfTheDay.ImagePath}" Stretch="UniformToFill" />
            </HubSection.Background>
          </HubSection>

          <HubSection Header="Top Rezepte">
            <DataTemplate>
              <GridView ItemsSource="{Binding TopRecipes}" >
                <GridView.ItemTemplate>
                  <DataTemplate>
                    <Image Source="{Binding ImagePath}" Width="300" Height="300" Stretch="UniformToFill">
                      <interactivity:Interaction.Behaviors>
                        <core:EventTriggerBehavior EventName="Tapped">
                          <core:NavigateToPageAction TargetPage="Cookbook.Views.RecipeDetailView"
                                                                Parameter="{Binding Id}" />
                        </core:EventTriggerBehavior>
                      </interactivity:Interaction.Behaviors>
                    </Image>
                  </DataTemplate>
                </GridView.ItemTemplate>
              </GridView>
            </DataTemplate>
          </HubSection>

          <HubSection Header="Alle Rezepte">
            <DataTemplate>
              <GridView ItemsSource="{Binding Recipes}" >
                <GridView.ItemTemplate>
                  <DataTemplate>
                    <Image Source="{Binding ImagePath}" Width="300" Height="300" Stretch="UniformToFill">
                      <interactivity:Interaction.Behaviors>
                        <core:EventTriggerBehavior EventName="Tapped">
                          <core:NavigateToPageAction TargetPage="Cookbook.Views.RecipeDetailView"
                                                                Parameter="{Binding Id}" />
                        </core:EventTriggerBehavior>
                      </interactivity:Interaction.Behaviors>
                    </Image>
                  </DataTemplate>
                </GridView.ItemTemplate>
              </GridView>
            </DataTemplate>
          </HubSection>
        </Hub>
      </SemanticZoom.ZoomedInView>
      <SemanticZoom.ZoomedOutView>
        <GridView ItemsSource="{Binding SectionHeaders, ElementName=hubControl}" HorizontalAlignment="Center" VerticalAlignment="Center">
          <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
              <Setter Property="FontSize" Value="36" />
            </Style>
          </GridView.ItemContainerStyle>
        </GridView>
      </SemanticZoom.ZoomedOutView>
    </SemanticZoom>
    
  </Grid>
</Page>
